iT邦幫忙

2023 iThome 鐵人賽

DAY 9
0
Modern Web

你應該要知道的CSS技巧:發掘被忽略但實用的屬性系列 第 9

【Day09】寬高尺寸傻傻分不清楚: inline-size 和 block-size

  • 分享至 

  • xImage
  •  

inline-size / block-size

inline-size支援度:Can I Use)
block-size支援度:Can I Use)

在介紹CSS RWD利器container之前,需要先補充介紹一下inline-sizeblock-size

inline-size 和 block-size是什麼?

  • 是容器查詢的屬性,用於指定元素的線性尺寸(inline-size)或塊尺寸(block-size)
  • inline-sizeblock size取決於書寫模式write-mode
  • 因為預設通常為水平書寫,write-mode:horizontal-tb; ,所以inline-size通常對應到容器的寬;block-size則對應到容器的高。

以下範例根據書寫模式write-mode的不同,inline-sizeblock size對應到容器的寬高也不同,大家可以一起試試!

Codepen範例

IT15-Day09-inline-size / block size

參考來源


上一篇
【Day08】CSS也有巢狀結構了 - CSS Nesting
下一篇
【Day10】讓排版更簡單的RWD新利器 - CSS container
系列文
你應該要知道的CSS技巧:發掘被忽略但實用的屬性30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言